<template>
	<transition name="fade">
        <div v-show="msgShow"
            :class="alertClass">
            <span class="glyphicon glyphicon-exclamation-sign"></span>
            {{ value }}
            <button class="close" @click="close"><span>&times;</span></button>
        </div>
    </transition>
</template>
<script>
	import { color } from './common/props'

	export default {
		props: {
			color: color('danger'),
			value: {
				type: String,
				default: '',
			},
		},
		computed: {
			msgShow: {
				get(){
	              let msg = this.value;
	              return (typeof msg === 'string') && 
	                        msg !== '';
				},
            },
            alertClass() {
            	return ['alert', 'alert-' + this.color];
            }
		},
		methods: {
			close() {
				this.$emit('input', '');
			},
		}
	}
</script>
<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
</style>